<template>
  <!-- 组件根标签 -->
  <div class="my_login">
    <ttnavbar title="登录">
      <template #zuoshang>
        <span></span>
      </template>
    </ttnavbar>
    <!-- 输入框 -->
    <van-form @submit="onSubmit">
      <van-cell-group class="input">
        <van-field
          v-model="mobile"
          type="tel"
          left-icon="phone-o"
          placeholder="请输入手机号"
          :rules="rules.mobile"
        ></van-field>
        <van-field
          v-model="code"
          type="password"
          left-icon="bag-o"
          placeholder="请输入密码"
          :rules="rules.code"
        >
          <template #button>
            <van-button round size="mini" type="default">获取验证码</van-button>
          </template></van-field
        >
      </van-cell-group>
      <!-- 按钮 -->
      <div class="btn">
        <van-button type="info" size="large" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>

    <!-- 条款 -->
    <div class="tiaokuan">
      隐私条款
    </div>
  </div>
</template>
<script>
// 导入用户登录的请求接口
import { userLogin } from './../../api/login'
import { getUserList } from './../../api/user'
// 操作token
import { setrefreshToken, setToken, setLocal } from './../../utils/token'
// 导入vuex辅助函数
import { mapMutations } from 'vuex'
// 请求接口
export default {
  name: 'app',
  data () {
    return {
      mobile: '13911112222',
      code: '246810',
      rules: {
        mobile: [
          { required: true, message: '一定要输入手机号', trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确格式的手机号',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '一定要输入验证码', trigger: 'onBlur' }
        ]
      }
    }
  },
  methods: {
    ...mapMutations(['setFollowList', 'setFollowIdList']),
    // 提交表单的事件
    async onSubmit () {
      console.log('点击了提交按钮了')
      this.$toast({
        type: 'loading',
        message: '正在登录...',
        duration: 0
      })

      const res = await userLogin({
        mobile: '13911112222',
        code: '246810'
      })
      console.log(res)

      // 保存token
      setToken(res.data.data.token)
      setLocal('express', +new Date())
      // 保存refresh_token
      setrefreshToken(res.data.data.refresh_token)
      // 获取用户关注列表
      const res2 = await getUserList()
      console.log(res2)
      this.setFollowList(res2.data.data.results)
      const flId = []
      for (let i = 0; i < res2.data.data.results.length; i++) {
        flId.push(res2.data.data.results[i].id)
      }
      console.log(flId)
      this.setFollowIdList(flId)
      this.$toast.success('登陆成功!')

      // 跳转到首页
      this.$router.push('/shouye')
    }
  },
  components: {},
  created () {}
}
</script>
<style lang="less" scoped>
.my_login {
  .input {
    margin: 20px 0;
    .van-button--mini {
      background-color: #ededed;
    }
  }

  .btn {
    padding: 10px;
    .van-button--large {
      border-radius: 6px;
    }
  }
  .tiaokuan {
    text-align: center;
    font-size: 18px;
    color: gray;
    margin-top: 200px;
  }
}
</style>
